<div class="layui-layout layui-layout-admin">

    <!-- 主体内容 -->
    <div class="layui-body switchBody" id="LAY_app_body">
        <div class="layadmin-tabsbody-item layui-show"></div>
    </div>
    <div class="layadmin-body-shade" layadmin-event="shade"></div>
</div>
<!-- 菜单 -->
<script id="skuHeader" type="text/html">
    <div class="layui-header" style="z-index:999!important;">
        <div class="fl header-logo"><a href="/"><span><b>SKU</b>管理系统</span></a></div>
        <div class="fl header-fold "><a href="javascript:;" title="打开/关闭左侧导航" class="aicon " id="foldSwitch"></a></div>
        <ul class="layui-nav fl nobg main-nav">
            {{#  layui.each(d.menu, function(index, item){ }}

            {{# if(item.nav==1){ }}

            {{# if(index==0){ }}
            <li class="layui-nav-item layui-this">
                {{# }else{ }}
            <li class="layui-nav-item">
                {{# } }}
                <a href="javascript:;">{{ item['title'] }}</a></li>
            {{# } }}

            {{#  }); }}
        </ul>
        <ul class="layui-nav fr nobg head-info " >
            <li class="layui-nav-item" style="">
                <a href="javascript:;" layadmin-event="theme" title="换肤">
                    <i class="layui-icon layui-icon-theme"> 换色</i>
                </a>
            </li>
            <li class="layui-nav-item layui-form" style="line-height: 40px; margin-right: 14px; display: none" >
                <input type="checkbox" name="" lay-skin="switch" lay-text="护眼|护眼" lay-filter="hy">
            </li>
            <li class="layui-nav-item">
                <a href="javascript:void(0);">您好，{{ d.cn_name }}&nbsp;&nbsp;</a>
                <dl class="layui-nav-child">
                    <dd>
                        <a lay-href="User/login">退出登陆</a>
                    </dd>
                </dl>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black" id="switchNav">
        <div class="layui-side-scroll">
            {{#  layui.each(d.menu, function(index, v){ }}

            {{# if(v.nav==1){ }}

                {{# if(index==0){ }}
            <ul class="layui-nav layui-nav-tree">
                {{# }else{ }}
                <ul class="layui-nav layui-nav-tree" style="display:none;">
                 {{# } }}
                 {{# if(v['childs']){ }}
                    {{#  layui.each(v['childs'], function(kk,vv){ }}
                    <li class="layui-nav-item {{# if(kk==0){ }}  layui-nav-itemed {{# } }}">
                    <a href="javascript:;"><i class="{{ vv['icon'] }}"></i> {{ vv['title'] }}<span
                            class="layui-nav-more"></span></a>
                    <dl class="layui-nav-child">

                        {{# if(vv['childs']){ }}
                        {{#  layui.each(vv['childs'], function(kkk,vvv){ }}
                        <dd >
                            <a class="admin-nav-item" data-id="{{vvv['id']}}" href="/#/{{vvv['url']}}"><i class="{{vvv['icon']}}"></i> {{vvv['title']}}</a>
                        </dd>
                        {{#  }); }}
                        {{# } }}

                    </dl>
                    </li>
                    {{#  }); }}
                    {{# } }}
                </ul>
                {{# } }}

                {{#  }); }}
        </div>
    </div>
</script>
<script type="text/html" id="huyan">
    <div class="css-bg-10">
        <style>
            .layui-input, .layui-select, .layui-textarea,.xm-select-parent .xm-select .xm-select-input,.xm-select-parent .xm-input,select, button,input{
                background-color: #f0fbf1 !important
            }

            /*4*/
            .layui-nav-tree .layui-nav-item a:hover,.layui-layout-admin .layui-header,.layui-nav-tree .layui-this, .layui-nav-tree .layui-this>a, .layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a{
            background-color: {{d.bg[3]}} !important;
            }
            input::-webkit-input-placeholder{
            color: {{d.bg[3]}}75;
            }
            input::-moz-placeholder{
            color:  {{d.bg[3]}}75;
            }

            /*3*/
            .layui-nav .layui-nav-child a:hover,.layui-nav-child,#switchNav .layui-nav,.layui-bg-black,div.xm-select-label>span,.layui-btn,.layui-layout-admin,.layui-btn, .layui-header .layui-nav .layui-this:after,.layui-nav-tree .layui-nav-bar,.nepadmin-tabs-wrap li.nepadmin-tabs-active:hover .nepadmin-tabs-ball, .nepadmin-tabs-wrap li.nepadmin-tabs-active .nepadmin-tabs-ball, #app-sidebar .layui-nav-tree .layui-nav-bar, .layui-bg-blue, .layui-layer-prompt .layui-layer-btn a.layui-layer-btn0, .layui-layer-admin-modal .layui-layer-btn a.layui-layer-btn0, .layui-laypage .layui-laypage-curr .layui-laypage-em, .layui-laydate li.layui-this, .layui-laydate td.layui-this, .layui-form-select dl dd.layui-this {
            background-color: {{d.bg[2]}} !important;
            }
            .layui-form-checked[lay-skin=primary] i, .layui-form-onswitch {
            border-color:  {{d.bg[2]}};
            background-color:  {{d.bg[2]}};
            }

            .layui-form-radio>i:hover, .layui-form-radioed>i{
                    color: {{d.bg[2]}};
            }
            .layui-layer-btn .layui-layer-btn0 {
                border-color: {{d.bg[2]}};
                background-color: {{d.bg[2]}};
                color: #fff;
            }


            /*2*/
            .layui-table tbody tr:hover,.layui-input, .layui-select, .layui-textarea,.xm-select-parent .xm-select .xm-select-input,.xm-select-parent .xm-input,select, button,input,.layui-laydate-content td.laydate-selected,.layui-layer-title,.layui-tab,body,.layui-fluid,.layui-body,.layui-tab,.layui-table thead tr, .layui-table-header, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr,.diyTable td:nth-child(odd){
            background-color:  {{d.bg[1]}} !important;
            }
            .layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row]{
            border-color: {{d.bg[1]}};
            }
            .header-logo span b {
            color:  {{d.bg[1]}} !important;
            }

            /*1*/
            .layui-layout-admin .layui-header .layui-nav-bar,.layui-layout-admin .layui-header .layui-nav .layui-this:after,.layui-tab-content,.layui-card,.layui-laypage-em,.layui-btn-primary,.layui-table,.layui-tab-title .layui-this,.layui-layer{
            background-color: {{d.bg[0]}} !important;
            }
            .layui-tab-title .layui-this:after{
            border-bottom-color:{{d.bg[0]}} !important;
            }
            .header-logo span {
            border-color: {{d.bg[0]}};
            color: {{d.bg[0]}};
            }



            /*自定义*/
            .layui-layout-admin .layui-header a, .layui-layout-admin .layui-header a cite{
                color: #f1f1f1 !important;
            }
            .layui-layout-admin .layui-header .layui-nav .layui-nav-more {
                border-top-color: #f0fbf1!important   ;
            }
            .layui-layout-admin .layui-header .layui-nav .layui-nav-mored {
                border-color: transparent!important   ;
                border-bottom-color: #f0fbf1!important   ;
            }
            .layui-nav .layui-nav-item a,.layui-nav-tree .layui-nav-child a{
                color: #fff !important;
            }



        </style>
    </div>
</script>

<script>
    layui.use(['laytpl', 'element','common','form'], function () {
        var $ = layui.$
            , element = layui.element
            , admin = layui.admin
            , setter = layui.setter
            , form = layui.form
            , tool = layui.common
            , laytpl = layui.laytpl;
        var getTpl = skuHeader.innerHTML
            , view = $('#view');

        //绿色 {"bg":['#e1f8e3','#b8eabb','#60be66','#399e3f']}
        //淡粉色{"bg":['#FDFBFE','#ECDFF4','#AE87C5','#8759A3']}
        //淡粉色{"bg":['#FFD6D6','#FFB1B1','#DA5858','#B83030']}
        //淡粉色{"bg":['#C6F1E9','#90DBCC','#3DA08D','#248D78']}
        //淡粉色{"bg":['#FFFFFF','#FFFEFA','#D4D1B6','#B3AE87']}
        //淡粉色{"bg":['#82CDEE','#55BAE5','#0A98D5','#0474A5']}
        //淡粉色{"bg":['#EFEBFD','#CBBFF2','#816BC8','#6048AB']}

        $('body').on('click','.set-bg',function () {
            var bg=this.getAttribute('data-index');
            $('.set-bg').removeClass('layui-this');$(this).addClass('layui-this');
            $('.css-bg-10').remove();
            laytpl(huyan.innerHTML).render(layui.setter.bg[bg], function (html) {
                if(bg!=1){
                    $('body').append(html);
                }
                layui.data(setter.tableName, {
                    key: 'bg'
                    , value: bg
                });
            })
            $.ajax({
                type: 'post',
                url: "/index/User/editBg",
                dataType: 'json',
                data: {'bg':bg},
                success: function (data) {

                }
            })
        })
        function setBg(bg) {
            if(bg!=1){
                laytpl(huyan.innerHTML).render(layui.setter.bg[bg], function (html) {
                    $('body').append(html);
                })
            }
        }
        var indexHref='Newsku/index';

        tool.ajax({"url":"/index/User/config",'jy-search':1},function(res){
            //admin.cacheConfig(res);
            if( typeof res.data.menu !="undefined"){
                //请求成功后，写入 access_token
                admin.cacheConfig(res);

                var v3={};
                var v4={};
                for(var i in res.data.menu){
                    //第一层 res.data.menu[i].title
                    var t1=res.data.menu[i].title;
                    if(typeof res.data.menu[i].childs!="undefined"){
                        for(var i2 in res.data.menu[i].childs){
                            //第二层 res.data.menu[i].childs[i2].title
                            var t2=res.data.menu[i].childs[i2].title;
                            if(typeof res.data.menu[i].childs[i2].childs!="undefined"){
                                for(var i3 in res.data.menu[i].childs[i2].childs){
                                    //第三层 res.data.menu[i].childs[i2].childs[i3].title
                                    var url3=res.data.menu[i].childs[i2].childs[i3].url;
                                    var t3=res.data.menu[i].childs[i2].childs[i3].title;
                                    v3[url3]=t1+','+t2+','+t3;
                                    if(typeof res.data.menu[i].childs[i2].childs[i3].childs!="undefined"){
                                        for(var i4 in res.data.menu[i].childs[i2].childs[i3].childs){
                                            //第四层
                                            var url4=res.data.menu[i].childs[i2].childs[i3].childs[i4].url;
                                            var t4=res.data.menu[i].childs[i2].childs[i3].childs[i4].title;
                                            v4[url4]=t1+','+t2+','+t3+','+t4;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                indexHref=Object.keys(v3)[0];

                var url=layui.router().path.join('/');
                var url1='';
                if(url==''){
                    url=layui.setter.entry;
                }
                url1=url;
                if(url=='Newsku/index'){
                    url=indexHref;
                }
                if(url1=='Newsku/index'&&indexHref!='Newsku/index'){
                    location.hash= '/'+indexHref;
                    window.location.reload();
                    return false;
                }

                layui.data(setter.tableName, {
                    key: 'menu3'
                    ,value: v3
                });
                layui.data(setter.tableName, {
                    key: 'menu4'
                    ,value: v4
                });

                setBg(res.data.bg);

                laytpl(getTpl).render(res.data, function (html) {
                    $('.layui-layout-admin').prepend(html);
                    element.render('nav');

                    /* 打开/关闭左侧导航 */
                    $('#foldSwitch').click(function(){
                        var that = $(this);
                        if (that.hasClass('ai-zhankaicaidan')) {
                            //展开
                            $('#switchNav').animate({width:'200px'}, 100);
                            $('.switchBody').animate({left:'200px'}, 100);
                            $('#switchNav .layui-nav-item').addClass('layui-nav-itemed');
                            that.addClass('ai-shouqicaidan').removeClass('ai-zhankaicaidan');
                        }else{
                            //缩
                            $('#switchNav').animate({width:'39px'}, 100);
                            $('.switchBody').animate({left:'39px'}, 100);
                            $('#switchNav .layui-nav-item').removeClass('layui-nav-itemed');
                            that.removeClass('ai-shouqicaidan').addClass('ai-zhankaicaidan');
                        }

                    });
                    /* 导航菜单切换 */
                    $('.main-nav a').click(function () {
                        var that = $(this), i = $('.main-nav a').index(this);
                        $('.layui-nav-tree').hide().eq(i).show();
                    });
                    //初始化菜单状态
                    $(".main-nav li").removeClass("layui-this");
                    $(".layui-side-scroll ul").hide();

                    var breadcrumb='';

                    if(typeof layui.data(layui.setter.tableName).menu3[url] !="undefined"){
                        breadcrumb=layui.data(layui.setter.tableName).menu3[url];
                    }else if(typeof layui.data(layui.setter.tableName).menu4[url] !="undefined"){
                        breadcrumb=layui.data(layui.setter.tableName).menu4[url];
                    }
                    /* 导航高亮标记 */
                    if(breadcrumb){
                        $(".main-nav a:contains("+breadcrumb.split(',')[0]+")").parent().addClass('layui-this');
                        $(".layui-side-scroll dd a:contains("+breadcrumb.split(',')[2]+")").parent().parent().parent().parent().show();
                        $(".layui-side-scroll dd a:contains("+breadcrumb.split(',')[2]+")").parent().addClass('layui-this');
                    }
                    $('#switchNav .layui-nav-item').addClass('layui-nav-itemed');
                    if(breadcrumb){
                        var html='';
                        breadcrumb=breadcrumb.split(',');
                        $.each(breadcrumb, function(i, v){
                            if((breadcrumb.length-1)==i){
                                html+="<a><cite>"+v+"</cite></a>";
                            }else{
                                html+="<a>"+v+"</a>";
                            }
                        });
                        $('.jy-breadcrumb').html(html);
                        element.render('breadcrumb');
                    }

                });
               // form.render(); //更新全部



            }else{
                layer.alert(res.msg);
            }

        },'',1);
    })
</script>
